<template>
    <div>
        <Header></Header>
        <div class="About">
            <article class="main-content page-page" style="margin-top:-190px;margin-bottom:-100px">
                <div class="post-header"><h1 class="post-title" itemprop="name headline"> About Blog</h1>
                </div>
                <div id="post-content" class="post-content">
                    <h2>此博客</h2>
                    <p>主要采用SpringBoot 和 Vue 等主流技术</p>
                    <p>参考<a href="https://github.com/">Github</a>多路大神的作品，结合自己的理解所作</p>
                    <p>如你所见，实现功能较少，页面细节有待提高</p>
                    <p>技术萌新一枚，需要学习的地方还有很多</p>
                    <p>恭请各路大神、同学、朋友给出忠实的意见和建议</p>
                    <p>本人感激不尽</p>
                    <p>加油！</p>

                    <h1 id="致谢"><a href="#致谢" class="headerlink animsition-link" title="致谢"/>致谢</h1>
                    <p><a href="https://github.com/Antabot/White-Jotter">Github 白卷</a></p>
                    <p><a href="https://github.com/YUbuntu0109/vsblog">Github vsblog</a></p>
                    <p><a href="https://github.com/TyCoding/tumo-vue">Github Tumo Blog</a></p>
                    <p><a href="https://space.bilibili.com/13491144" target="_blank">MarkerHub teacher</a></p>
                    <p><a href="https://github.com/lenve/VBlog" target="_blank">VBlog</a></p>


<!--                    <h1 id="联系"><a href="#联系" class="headerlink animsition-link" title="联系"/>联系</h1>-->
<!--                    <ul>-->
<!--                        <li><a href="http://www.tycoding.cn" class="animsition-link">Blog@TyCoding’s blog</a></li>-->
<!--                        <li><a href="https://github.com/TyCoding" target="_blank" rel="noopener"-->
<!--                               class="animsition-link">GitHub@TyCoding</a></li>-->
<!--                        <li><a href="https://www.zhihu.com/people/tomo-83-82/activities" target="_blank" rel="noopener"-->
<!--                               class="animsition-link">ZhiHu@TyCoding</a></li>-->
<!--                    </ul>-->
                </div>
            </article>
        </div>
        <Footer></Footer>
    </div>


</template>

<script>
    import Header from "@/components/Header";
    import Footer from "@/components/Footer";

    export default {
        name: 'Index',
        data() {
            return {}
        },
        components: {
            Header,
            Footer
        }

    }
</script>
<style lang="scss" scoped>

    .About {
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            border: 0;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        *, :after, :before {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box
        }

        html {
            overflow-x: hidden;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%
        }

        ::-moz-selection {
            color: #fff;
            background-color: #eb5055
        }

        ::selection {
            color: #fff;
            background-color: #eb5055
        }

        body {
            font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
            font-size: 14px;
            line-height: 1.8;
            margin: 0 auto;
            color: #313131;
            text-rendering: geometricPrecision;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        body > :first-child {
            margin-top: 0 !important
        }

        body > :last-child {
            margin-bottom: 0 !important
        }

        blockquote, dl, ol, p, pre, table, ul {
            margin: 20px 0;
            vertical-align: baseline
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 400;
            -webkit-font-smoothing: antialiased
        }

        h1 code, h1 tt, h2 code, h2 tt, h3 code, h3 tt, h4 code, h4 tt, h5 code, h5 tt, h6 code, h6 tt {
            font-size: inherit
        }

        h1 {
            font-size: 1.4em;
            color: #222
        }

        h2 {
            font-size: 1.3em;
            color: #333
        }

        h3 {
            font-size: 1.2em;
            color: #444
        }

        h4 {
            font-size: 1.1em;
            color: #555
        }

        h5 {
            font-size: 1em;
            color: #555
        }

        h6 {
            font-size: 1em;
            color: #555
        }

        body > h1:first-child, body > h1:first-child + h2, body > h2:first-child, body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
            margin-top: 0;
            padding-top: 0
        }

        a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
            margin-top: 0;
            padding-top: 0
        }

        a {
            text-decoration: none;
            color: #313131;
            outline: 0
        }

        a:active, a:focus, a:hover {
            color: #eb5055;
            outline: 0
        }

        ol, ul {
            padding-left: 30px
        }

        ol li ol:first-of-type, ol li ul:first-of-type, ol li > :first-child, ul li ol:first-of-type, ul li ul:first-of-type, ul li > :first-child {
            margin-top: 0
        }

        li {
            word-wrap: break-word
        }

        li p {
            margin: 0
        }

        ol ol, ol ul, ul ol, ul ul {
            margin-bottom: 0
        }

        pre {
            position: relative;
            margin: 20px 0
        }

        code {
            font-family: Menlo, Bitstream Vera Sans Mono, DejaVu Sans Mono, Monaco, Consolas, monospace;
            font-size: 13px;
            margin: 0 3px;
            padding: 2px 6px;
            border-radius: 3px;
            background-color: #f7f7f7
        }

        pre code {
            font-size: 13px;
            display: block;
            overflow: auto;
            padding: 1.3em;
            border: 0
        }

        blockquote {
            padding: 0 10px 0 20px;
            border-left: 4px solid #ddd
        }

        blockquote > :first-child {
            margin-top: 0
        }

        blockquote > :last-child {
            margin-bottom: 0
        }

        hr {
            clear: both;
            overflow: hidden;
            height: 0;
            margin: 15px 0;
            padding: 0;
            border: 0;
            border-bottom: 2px solid #ddd;
            background: 0 0
        }

        table {
            font-size: 13px;
            display: block;
            overflow: auto;
            width: 100%;
            border-spacing: 0;
            border-collapse: collapse;
            word-wrap: normal;
            word-break: normal
        }

        table th {
            font-weight: 700
        }

        table td, table th {
            padding: 6px 13px;
            white-space: nowrap;
            border: 1px solid #ddd
        }

        table tr {
            border-top: 1px solid #ccc;
            background-color: #fff
        }

        table tr:hover {
            background-color: #f7f7f7
        }

        table thead tr {
            background-color: #f7f7f7
        }

        button, input, select, textarea {
            font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
            font-size: 13px;
            line-height: 1.6;
            resize: none
        }

        input:focus:invalid, input:required:invalid, textarea:focus:invalid, textarea:required:invalid {
            box-shadow: none
        }

        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            color: #5f5f5f
        }

        input:-moz-placeholder, textarea:-moz-placeholder {
            color: #5f5f5f
        }

        input::-moz-placeholder, textarea::-moz-placeholder {
            color: #5f5f5f
        }

        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
            color: #5f5f5f
        }

        .clearfix:after, .clearfix:before {
            display: table;
            content: ''
        }

        .clearfix:after {
            clear: both
        }

        .clearfix {
            zoom: 1
        }

        .left {
            float: left
        }

        .right {
            float: right
        }

        .browsehappy {
            position: fixed;
            z-index: 999;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 40px;
            padding: 10px;
            text-align: center;
            color: #8a1f11;
            background: #fbe3e4
        }

        .browsehappy a {
            font-weight: 700;
            text-decoration: underline;
            color: #8a1f11
        }

        .bg-white {
            background-color: #fff !important
        }

        .bg-grey {
            background-color: #f7f7f7 !important
        }

        .bg-deepgrey {
            background-color: rgba(0, 0, 0, .5) !important
        }

        .bg-blue {
            background-color: #6fa3ef !important
        }

        .bg-purple {
            background-color: #bc99c4 !important
        }

        .bg-green {
            background-color: #46c47c !important
        }

        .bg-yellow {
            background-color: #f9bb3c !important
        }

        .bg-red {
            background-color: #e8583d !important
        }

        .bg-orange {
            background-color: #f68e5f !important
        }

        .text-white {
            color: #fff !important
        }

        .MathJax_Display {
            overflow-x: auto;
            overflow-y: hidden
        }

        .MathJax {
            outline: 0
        }

        .MathJax span {
            font-size: 15px
        }

        #instantclick-bar {
            background-color: #eb5055
        }

        .icon-search {
            position: relative;
            z-index: 1;
            display: inline-block;
            width: 13px;
            height: 13px;
            margin: 2px 0 0 3px;
            -webkit-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            color: #313131;
            border: solid 2px currentColor;
            border-radius: 50%
        }

        .icon-search:before {
            position: absolute;
            top: 11px;
            left: 3px;
            width: 2px;
            height: 4px;
            content: '';
            background-color: currentColor
        }

        .icon-menu {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 12px;
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
            -webkit-transition-timing-function: cubic-bezier(.61, .04, .17, 1.32);
            transition-timing-function: cubic-bezier(.61, .04, .17, 1.32)
        }

        .icon-menu .middle {
            position: absolute;
            top: 50%;
            left: -.25em;
            display: inline-block;
            width: 20px;
            height: 2px;
            margin-top: -1px;
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
            background: #313131
        }

        .icon-menu:after, .icon-menu:before {
            position: absolute;
            left: -.25em;
            width: 20px;
            height: 2px;
            content: '';
            -webkit-transition: all .4s ease-in-out;
            transition: all .4s ease-in-out;
            -webkit-transform-origin: 50% 50% 0;
            -ms-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
            background: #313131
        }

        .icon-menu:after {
            bottom: 0
        }

        .icon-menu:before {
            top: 0
        }

        .bg-ico-book {
            background-position: 0 0 !important
        }

        .bg-ico-game {
            background-position: 0 -40px !important
        }

        .bg-ico-note {
            background-position: 0 -80px !important
        }

        .bg-ico-chat {
            background-position: 0 -120px !important
        }

        .bg-ico-code {
            background-position: 0 -160px !important
        }

        .bg-ico-image {
            background-position: 0 -200px !important
        }

        .bg-ico-web {
            background-position: 0 -240px !important
        }

        .bg-ico-link {
            background-position: 0 -280px !important
        }

        .bg-ico-design {
            background-position: 0 -320px !important
        }

        .bg-ico-lock {
            background-position: 0 -360px !important
        }

        .header {
            line-height: 68px;
            position: fixed;
            z-index: 10;
            top: 0;
            display: block;
            width: 100%;
            height: 70px;
            padding: 0;
            text-align: right;
            -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
            -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
            box-shadow: 0 1px 5px rgba(0, 0, 0, .1)
        }

        .header.animated {
            -webkit-animation-duration: .5s;
            animation-duration: .5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both
        }

        .header.animated.slideUp {
            -webkit-animation-name: slideUp;
            animation-name: slideUp
        }

        .header.animated.slideDown {
            -webkit-animation-name: slideDown;
            animation-name: slideDown
        }

        .navbar-container {
            position: relative;
            width: 1040px;
            max-width: 100%;
            height: 70px;
            margin: 0 auto
        }

        .navbar-logo {
            font-size: 22px;
            line-height: 22px;
            position: absolute;
            top: 50%;
            left: 0;
            display: block;
            width: auto;
            max-width: 50%;
            height: 22px;
            margin-top: -10px;
            margin-left: 25px;
            text-decoration: none
        }

        .navbar-logo img {
            width: auto;
            height: 22px;
            outline: 0
        }

        .navbar-menu {
            z-index: 10;
            display: inline-block;
            width: auto;
            padding-right: 5px
        }

        .navbar-menu a {
            font-size: 14px;
            padding: 0 15px
        }

        .navbar-menu a.current {
            color: #eb5055
        }

        .navbar-mobile-menu {
            line-height: 70px;
            z-index: 1;
            display: none;
            width: 28px;
            padding: 0 45px 0 10px;
            cursor: pointer
        }

        .navbar-mobile-menu:active, .navbar-mobile-menu:hover {
            cursor: pointer
        }

        .navbar-mobile-menu:active:before, .navbar-mobile-menu:hover:before {
            -webkit-animation: pointer-ball .3s ease 1;
            animation: pointer-ball .3s ease 1;
            -webkit-animation-timing-function: cubic-bezier(.61, .04, .17, 1.32);
            animation-timing-function: cubic-bezier(.61, .04, .17, 1.32)
        }

        .navbar-mobile-menu:active .icon-menu, .navbar-mobile-menu:hover .icon-menu {
            -webkit-transform: rotateZ(360deg);
            -ms-transform: rotateZ(360deg);
            transform: rotateZ(360deg)
        }

        .navbar-mobile-menu:active .icon-menu.cross .middle, .navbar-mobile-menu:active .icon-menu.cross:after, .navbar-mobile-menu:active .icon-menu.cross:before, .navbar-mobile-menu:hover .icon-menu.cross .middle, .navbar-mobile-menu:hover .icon-menu.cross:after, .navbar-mobile-menu:hover .icon-menu.cross:before {
            background: #eb5055
        }

        .navbar-mobile-menu:active .icon-menu.cross .middle, .navbar-mobile-menu:hover .icon-menu.cross .middle {
            opacity: 0
        }

        .navbar-mobile-menu:active .icon-menu.cross:after, .navbar-mobile-menu:hover .icon-menu.cross:after {
            bottom: 5px;
            -webkit-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
            transform: rotate(135deg)
        }

        .navbar-mobile-menu:active .icon-menu.cross:before, .navbar-mobile-menu:hover .icon-menu.cross:before {
            top: 5px;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-box-shadow: 0 0 0 #fff;
            box-shadow: 0 0 0 #fff
        }

        .navbar-mobile-menu li {
            position: relative;
            display: inline;
            margin: 0;
            text-decoration: none
        }

        .navbar-mobile-menu ul {
            position: absolute;
            z-index: 1;
            top: 100%;
            overflow: hidden;
            clip: rect(1px, 1px, 1px, 1px);
            margin: 0 0 0 -95px;
            padding: 0;
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            transition: transform .3s;
            -webkit-transform: translate(120px, 0);
            -ms-transform: translate(120px, 0);
            transform: translate(120px, 0);
            text-indent: 0
        }

        .navbar-mobile-menu:active > ul, .navbar-mobile-menu:focus > ul, .navbar-mobile-menu:hover > ul {
            overflow: inherit;
            clip: inherit;
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            transition: transform .3s;
            -webkit-transform: translateX(0) translateY(0) translateZ(0);
            transform: translateX(0) translateY(0) translateZ(0)
        }

        .navbar-mobile-menu ul li a {
            font-size: 15px;
            line-height: 2.2;
            display: block;
            width: 140px;
            margin: 0;
            padding: 8px 25px;
            background-color: #eee
        }

        .navbar-search {
            line-height: 70px;
            display: inline-block;
            width: 20px;
            padding: 0 40px 0 0;
            cursor: pointer
        }

        .navbar-search:active > form, .navbar-search:focus > form, .navbar-search:hover > form {
            overflow: inherit;
            clip: inherit;
            -webkit-transition: opacity .5s ease-in-out;
            transition: opacity .5s ease-in-out;
            opacity: 1
        }

        .navbar-search:active > .icon-search, .navbar-search:focus > .icon-search, .navbar-search:hover > .icon-search {
            color: #eb5055
        }

        .navbar-search form {
            line-height: 30px;
            position: absolute;
            top: 50%;
            right: 0;
            display: block;
            overflow: hidden;
            clip: rect(1px, 1px, 1px, 1px);
            width: auto;
            max-width: 60%;
            height: 30px;
            margin-top: -15px;
            padding-right: 10px;
            opacity: 0
        }

        .navbar-search form .search-box {
            line-height: 30px;
            position: relative;
            top: -1px;
            display: inline-block;
            width: 400px;
            max-width: 100%;
            height: 30px;
            padding: 0;
            border: none;
            border-radius: 3px
        }

        .navbar-search form .search-box input {
            font-size: 14px;
            line-height: 30px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 30px;
            padding: 0 40px 0 18px;
            color: #313131;
            border: 1px solid #eb5055;
            border-radius: 20px;
            outline: 0;
            background-color: #fff;
            -webkit-appearance: none
        }

        .main-content {
            position: relative;
            max-width: 940px;
            margin: 0 auto;
            -webkit-animation: fade-in .5s;
            animation: fade-in;
            animation-duration: .5s
        }

        .index-page {
            padding: 120px 20px 0
        }

        .index-page .post-list-item-container .item-label {
            padding: 10px 20px 40px
        }

        .post-lists {
            position: relative;
            display: block;
            overflow: hidden
        }

        .post-lists-body {
            display: block
        }

        .post-list-item {
            float: left;
            width: 33.3333%;
            height: auto;
            padding: 15px;
            align-items: center
        }

        .post-list-item-container {
            position: relative;
            overflow: hidden;
            width: 100%;
            padding: 0;
            border-radius: 3px;
            background-color: #fff;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
            box-shadow: 0 1px 4px rgba(0, 0, 0, .04)
        }

        .post-list-item-container:hover {
            -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, .1);
            box-shadow: 2px 2px 4px rgba(0, 0, 0, .1)
        }

        .post-list-item-container .item-thumb {
            position: relative;
            display: inherit;
            min-height: 250px;
            -webkit-transition: -webkit-transform .5s ease, filter .5s ease;
            -moz-transition: -moz-transform .5s ease, filter .5s ease;
            transition: transform .5s ease, filter .5s ease;
            background-position: 50% 50%;
            background-size: cover
        }

        .post-list-item-container .item-desc {
            position: absolute;
            top: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
            padding: 40px 28px
        }

        .post-list-item-container .item-desc p {
            font-size: 14px;
            margin: 0;
            padding: 0;
            word-break: break-all;
            opacity: 0;
            color: #fff
        }

        .post-list-item-container:hover .item-thumb {
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            transform: scale(1.1);
            -webkit-filter: blur(3px);
            -moz-filter: blur(3px);
            filter: blur(3px)
        }

        .post-list-item-container:hover .item-desc {
            background-color: rgba(0, 0, 0, .5)
        }

        .post-list-item-container:hover .item-desc p {
            -webkit-animation: fade-in .5s;
            animation: fade-in;
            animation-duration: .5s;
            opacity: 1
        }

        .post-list-item-container .item-slant {
            position: absolute;
            z-index: 0;
            right: 0;
            bottom: 50px;
            left: 0;
            width: 110%;
            min-height: 100px;
            -webkit-transform: rotate(7deg) translate(-10px, 0);
            -ms-transform: rotate(7deg) translate(-10px, 0);
            transform: rotate(7deg) translate(-10px, 0);
            background-color: #fff
        }

        .post-list-item-container .item-slant.reverse-slant {
            -webkit-transform: rotate(-10deg) translate(10px, -10px);
            -ms-transform: rotate(-10deg) translate(10px, -10px);
            transform: rotate(-10deg) translate(10px, -10px);
            opacity: .7;
            background-color: #f68e5f;
            -webkit-box-shadow: none;
            box-shadow: none
        }

        .post-list-item-container .item-label {
            position: relative;
            height: 130px;
            padding: 25px 20px 40px;
            background-color: #fff
        }

        .post-list-item-container .item-label .item-title a {
            font-size: 17px;
            line-height: 17px;
            word-break: break-all;
            color: #313131
        }

        .post-list-item-container .item-label .item-meta {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 100%;
            padding: 0 15px 15px;
            text-align: right
        }

        .post-list-item-container .item-label .item-meta .item-meta-cat a {
            font-size: 13px;
            position: relative;
            float: right;
            margin-right: 10px;
            padding: 10px 0;
            text-align: right;
            text-transform: none;
            color: #5f5f5f
        }

        .post-list-item-container .item-label .item-meta .item-meta-date {
            font-size: 12px;
            position: relative;
            float: left;
            padding-top: 9px;
            padding-left: 9px;
            text-align: right;
            text-transform: none;
            color: #f1f1f1
        }

        .post-list-item-container .item-label .item-meta .item-meta-ico {
            display: inline-block;
            float: right;
            width: 42px;
            height: 42px;
            border: 1px solid #eaeaea;
            border-radius: 50%
        }

        .onelist-page {
            max-width: 100%;
            margin: 0;
            padding: 70px 0 0
        }

        .post-onelist-item {
            display: inline-block;
            width: 100%;
            margin: 0
        }

        .post-onelist-item:nth-child(n) {
            background-color: #f7f7f7
        }

        .post-onelist-item:nth-child(2n) {
            background-color: #fff
        }

        .post-onelist-item-container {
            position: relative;
            max-width: 680px;
            margin: 0 auto;
            padding: 70px 20px 65px
        }

        .post-onelist-item-container .onelist-item-thumb {
            min-height: 260px;
            border-radius: 5px;
            background-position: 50% 50%;
            background-size: cover;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
            box-shadow: 0 1px 4px rgba(0, 0, 0, .04)
        }

        .post-onelist-item-container .onelist-item-thumb:hover {
            -webkit-box-shadow: 2px 3px 4px rgba(0, 0, 0, .1);
            box-shadow: 2px 3px 4px rgba(0, 0, 0, .1)
        }

        .post-onelist-item-container .item-title {
            display: block;
            margin: 30px 0 0;
            text-align: center
        }

        .post-onelist-item-container .item-title a {
            font-size: 21px;
            line-height: 17px;
            color: #313131
        }

        .post-onelist-item-container .item-content {
            padding: 0 30px 10px;
            text-align: center;
            word-break: break-all
        }

        .post-onelist-item-container .item-meta, .post-onelist-item-container .item-readmore {
            font-size: 12px;
            text-align: center;
            color: #5f5f5f
        }

        .post-onelist-item-container .item-meta a {
            color: #5f5f5f
        }

        .post-onelist-item-container .item-readmore a {
            padding: 8px 20px;
            color: #5f5f5f;
            border: 1px solid #5f5f5f;
            border-radius: 20px
        }

        .post-onelist-item-container .item-meta-hr {
            display: block;
            width: 55px;
            height: 2px;
            margin: 20px auto 0
        }

        .post-header-thumb {
            position: relative;
            width: 100%;
            height: 300px;
            margin-top: 70px
        }

        .post-header-thumb-op {
            position: absolute;
            width: 100%;
            width: 100%;
            height: 300px;
            background-position: center;
            background-size: cover;
            -webkit-filter: blur(4px);
            -moz-filter: blur(4px);
            filter: blur(4px)
        }

        .post-header-thumb-cover {
            position: relative;
            width: 100%;
            height: 300px;
            margin-top: 70px;
            background-color: rgba(0, 0, 0, .5);
            -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
            -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
            box-shadow: 0 1px 5px rgba(0, 0, 0, .3)
        }

        .post-header-thumb-container {
            position: relative;
            top: 100px;
            max-width: 700px;
            margin: 0 auto;
            padding: 30px 25px 20px;
            -webkit-animation: fade-in .5s;
            animation: fade-in;
            animation-duration: .5s
        }

        .post-header-thumb-title {
            font-size: 21px;
            font-weight: 500;
            color: #fff
        }

        .post-header-thumb-meta {
            color: #fff
        }

        .post-header-thumb-meta a {
            color: #fff
        }

        .post-header-thumb-container .post-tags {
            border-bottom: none
        }

        .post-header-thumb-container .post-tags a:hover {
            color: #5f5f5f;
            border: 1px solid #f7f7f7;
            outline-style: none;
            background: #f7f7f7
        }

        .post-page {
            max-width: 700px;
            padding: 30px 25px 20px
        }

        .page-page {
            max-width: 700px;
            padding: 130px 25px 20px
        }

        .post-content p {
            font-size: 14px;
            word-wrap: break-word;
            word-break: break-word
        }

        .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 {
            font-weight: 500;
            position: relative;
            margin: 20px 0
        }

        .post-content h1::before, .post-content h2::before, .post-content h3::before, .post-content h4::before, .post-content h5::before, .post-content h6::before {
            font-weight: 600;
            position: absolute;
            top: 0;
            left: -15px;
            content: '#';
            color: #eb5055
        }

        .post-content pre {
            overflow-x: auto;
            margin: 20px 0;
            border-radius: 4px;
            background: #f7f7f7;
            text-shadow: none
        }

        .post-content pre code {
            line-height: 20px;
            margin: 0;
            padding: 1.3em;
            color: #313131;
            background-color: #f7f7f7
        }

        .post-content p a {
            color: #313131;
            border-bottom: 1px solid #ccc
        }

        .post-content p a:hover {
            color: #eb5055;
            border-bottom: 1px solid #eb5055
        }

        .post-content img {
            position: relative;
            display: block;
            overflow: hidden;
            max-width: 100%;
            height: auto;
            margin: 0 auto
        }

        .post-content p img {
            position: relative;
            display: block;
            overflow: hidden;
            max-width: 100%;
            height: auto;
            margin: 20px auto
        }

        .post-content input.text {
            display: inline-block;
            padding: 5px 10px;
            color: #5f5f5f;
            border: 1px solid #5f5f5f;
            border-radius: 3px;
            outline: 0;
            background-color: #fff
        }

        .post-content input.submit {
            display: inline-block;
            padding: 5px 15px;
            color: #fff;
            border: 1px solid #5f5f5f;
            border-radius: 3px;
            outline: 0;
            background-color: #5f5f5f
        }

        .post-content .flinks {
            padding: 0
        }

        .post-content .flinks li {
            display: inline-block;
            overflow: hidden;
            width: 32%;
            white-space: nowrap;
            text-overflow: ellipsis
        }

        .post-page .post-header {
            display: none
        }

        .post-page .post-content .post-tags {
            display: none
        }

        .post-title {
            font-size: 21px
        }

        .post-data, .post-data a {
            font-size: 12px;
            color: #5f5f5f
        }

        .post-tags {
            margin: 0;
            padding: 5px 0 15px;
            border-bottom: 1px solid #e0e0e0
        }

        .post-tags a {
            font-size: 13px;
            font-weight: 600;
            display: inline-block;
            margin: 4px 8px 0 0;
            padding: 0 15px;
            -webkit-transition-duration: .4s;
            transition-duration: .4s;
            letter-spacing: 0
        }

        .post-tags a:nth-child(1n) {
            color: #fff;
            border: 1px solid #6fa3ef;
            border-radius: 15px;
            background: #6fa3ef
        }

        .post-tags a:nth-child(2n) {
            color: #fff;
            border: 1px solid #ff9800;
            border-radius: 15px;
            background: #ff9800
        }

        .post-tags a:nth-child(3n) {
            color: #fff;
            border: 1px solid #46c47c;
            border-radius: 15px;
            background: #46c47c
        }

        .post-tags a:nth-child(4n) {
            color: #fff;
            border: 1px solid #f9bb3c;
            border-radius: 15px;
            background: #f9bb3c
        }

        .post-tags a:nth-child(5n) {
            color: #fff;
            border: 1px solid #bc99c4;
            border-radius: 15px;
            background: #bc99c4
        }

        .post-tags a:nth-child(6n) {
            color: #fff;
            border: 1px solid #e8583d;
            border-radius: 15px;
            background: #e8583d
        }

        .post-tags a::before {
            content: '# '
        }

        .post-content .post-tags a:hover {
            color: #5f5f5f;
            border: 1px solid #f7f7f7;
            outline-style: none;
            background: #f7f7f7
        }

        .post-info {
            overflow: hidden;
            margin: 25px -20px 0;
            padding: 25px 20px 20px;
            white-space: nowrap;
            text-overflow: ellipsis;
            border-top: 1px solid #e0e0e0
        }

        .related-post-lists {
            position: relative;
            z-index: 1;
            margin-bottom: -10px;
            padding-top: 30px;
            background-color: #f7f7f7
        }

        .related-post-lists .post-lists {
            max-width: 940px;
            margin: 0 auto
        }

        .related-post-lists .post-list-item-container {
            border: 1px solid rgba(184, 197, 214, .2);
            border-radius: 3px;
            background: #fff;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
            box-shadow: 0 1px 4px rgba(0, 0, 0, .04)
        }

        .related-post-lists .post-list-item-container .item-label {
            height: 120px;
            background: #fff
        }

        .related-post-lists .post-list-item-container .item-label .item-title a {
            font-size: 14px;
            color: #313131
        }

        .related-post-lists .post-list-item-container .item-label .item-meta .item-meta-cat a {
            color: #5f5f5f
        }

        .related-post-lists .post-list-item-container .item-label .item-meta .item-meta-ico {
            width: 42px;
            height: 42px;
            border: 1px solid #eaeaea;
            border-radius: 50%
        }

        .archive-page {
            padding: 120px 20px 40px
        }

        .archive-page .categorys-title {
            font-size: 14px;
            position: relative;
            margin: 10px auto;
            padding: 0 30px;
            color: #5f5f5f
        }

        .archive-page .categorys-title a {
            color: #5f5f5f
        }

        .archive-page .categorys-title::before {
            position: absolute;
            top: 0;
            left: -15px;
            padding: 0 30px;
            content: '#';
            color: #eb5055
        }

        .archive-page .post-list-item-container {
            border: 1px solid rgba(184, 197, 214, .2);
            border-radius: 3px;
            background: #fff;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
            box-shadow: 0 1px 4px rgba(0, 0, 0, .04)
        }

        .archive-page .post-list-item-container .item-label {
            height: 95px;
            background: #fff
        }

        .archive-page .post-list-item-container .item-label .item-title a {
            font-size: 14px;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #313131
        }

        .archive-page .post-list-item-container .item-label .item-meta .item-meta-date {
            padding-bottom: 5px;
            padding-left: 5px;
            color: #5f5f5f
        }

        .common-page {
            padding: 120px 20px 0
        }

        .common-page .common-title {
            font-size: 14px;
            position: relative;
            margin: 10px auto;
            padding: 0 30px;
            color: #5f5f5f
        }

        .common-page .common-title::before {
            position: absolute;
            top: 0;
            left: -15px;
            padding: 0 30px;
            content: '#';
            color: #eb5055
        }

        .common-page .post-list-item {
            width: 49.9999%
        }

        .common-page .post-list-item-container .item-label {
            background-color: #fff
        }

        .common-page .post-list-item-container .item-label .item-title a {
            font-size: 14px;
            color: #313131
        }

        .common-page .post-list-item-container .item-label .item-meta .item-meta-date {
            padding-bottom: 5px;
            padding-left: 5px;
            color: #5f5f5f
        }

        .archive-page .post-list-item:hover, .common-page .post-list-item:hover, .related-post-lists .post-list-item:hover {
            -webkit-transition-duration: .3s;
            transition-duration: .3s;
            -webkit-transform: scale(1.03);
            transform: scale(1.03)
        }

        .post-list-item-container .item-label.bg-blue .item-title a {
            color: #fff
        }

        .post-list-item-container .item-label.bg-purple .item-title a {
            color: #fff
        }

        .post-list-item-container .item-label.bg-green .item-title a {
            color: #fff
        }

        .post-list-item-container .item-label.bg-yellow .item-title a {
            color: #fff
        }

        .post-list-item-container .item-label.bg-red .item-title a {
            color: #fff
        }

        .post-list-item-container .item-label.bg-orange .item-title a {
            color: #fff
        }

        .post-list-item-container .item-label.bg-blue .item-meta .item-meta-date {
            color: #fff
        }

        .post-list-item-container .item-label.bg-purple .item-meta .item-meta-date {
            color: #fff
        }

        .post-list-item-container .item-label.bg-green .item-meta .item-meta-date {
            color: #fff
        }

        .post-list-item-container .item-label.bg-yellow .item-meta .item-meta-date {
            color: #fff
        }

        .post-list-item-container .item-label.bg-red .item-meta .item-meta-date {
            color: #fff
        }

        .post-list-item-container .item-label.bg-orange .item-meta .item-meta-date {
            color: #fff
        }

        .search-page .search-box {
            line-height: 40px;
            position: relative;
            top: -1px;
            display: inline-block;
            width: 100%;
            height: 40px;
            padding: 0;
            border: none;
            border-radius: 3px
        }

        .search-page .search-box .input {
            font-size: 14px;
            line-height: 40px;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 40px;
            padding: 0 40px 0 18px;
            color: #313131;
            border: 1px solid rgba(184, 197, 214, .2);
            border-radius: 20px;
            outline: 0;
            background-color: #fff;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
            box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
            -webkit-appearance: none
        }

        .search-page .search-box .spsubmit {
            line-height: 42px;
            float: right;
            margin-right: 15px;
            outline: 0;
            background-color: transparent
        }

        .search-page .search-tags {
            margin: 0;
            padding: 15px 0;
            text-align: center
        }

        .search-page .search-tags p {
            margin: 20px 0 0
        }

        .search-page .search-tags a {
            font-size: 13px;
            display: inline-block;
            margin: 10px 8px 0 0;
            padding: 2px 15px;
            -webkit-transition-duration: .4s;
            transition-duration: .4s;
            letter-spacing: 0;
            border-radius: 15px;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
            box-shadow: 0 1px 4px rgba(0, 0, 0, .04)
        }

        .search-page .search-tags-hr {
            display: block;
            width: 55px;
            height: 2px;
            margin: 20px auto 10px
        }

        .directory-content {
            position: relative;
            z-index: 0;
            max-width: 720px;
            margin-right: auto !important;
            margin-left: auto !important;
            text-align: right;
            opacity: 0
        }

        .directory-content.initial {
            opacity: 0
        }

        .directory-content.pinned {
            opacity: 1
        }

        .directory-content.unpinned {
            opacity: 1
        }

        .directory-content.headroom--top {
            opacity: 0
        }

        .directory-content.headroom--not-top {
            -webkit-transition: opacity .5s ease-in-out;
            transition: opacity .5s ease-in-out;
            opacity: 1
        }

        #directory {
            position: fixed;
            z-index: 0;
            top: 100px;
            display: inline-block;
            text-align: left
        }

        #directory li, #directory ul {
            margin: 0;
            padding-left: 0;
            list-style: none
        }

        #directory > ul {
            position: relative;
            border-left: 1px solid #ddd
        }

        #directory > ul > li::before {
            position: relative;
            top: 0;
            left: -4px;
            display: inline-block;
            width: 7px;
            height: 7px;
            content: '';
            border-radius: 50%;
            background-color: #eb5055
        }

        #directory ul li a {
            display: inline-table;
            margin-left: 5px;
            white-space: nowrap
        }

        #directory ul li ul li a {
            margin-left: 20px;
            white-space: nowrap;
            color: #5f5f5f
        }

        #directory ul li ul li ul li a {
            margin-left: 30px;
            color: #5f5f5f
        }

        #directory a:hover {
            color: #eb5055
        }

        .post-bottom-bar {
            position: fixed;
            z-index: 2;
            right: 0;
            bottom: 0;
            left: 0;
            height: 48px;
            border-top: 1px solid #e0e0e0;
            background-color: #fff
        }

        .post-bottom-bar .bottom-bar-inner {
            max-width: 900px;
            margin: 0 auto;
            padding: 0 10px
        }

        .post-bottom-bar .social-share {
            font-size: 14px;
            line-height: 48px;
            margin: 0 0 0 10px;
            color: #313131
        }

        .post-bottom-bar .bottom-bar-item a {
            font-size: 14px;
            line-height: 48px;
            margin: 0;
            padding: 12px;
            cursor: pointer;
            color: #313131;
            border: 0;
            background: 0 0
        }

        .post-bottom-bar .bottom-bar-item a:hover {
            color: #eb5055
        }

        .post-bottom-bar .social-share .bottom-bar-item {
            padding: 4px
        }

        .post-bottom-bar .social-share .bottom-bar-item a {
            font-size: 13px;
            padding: 4px 12px;
            -webkit-transition-duration: .4s;
            transition-duration: .4s;
            border-radius: 15px
        }

        .post-bottom-bar .social-share .bottom-bar-item a:hover {
            color: #5f5f5f;
            background-color: #f7f7f7
        }

        .post-bottom-bar .bottom-bar-item.bottom-bar-facebook a {
            color: #fff;
            background-color: #4267b2
        }

        .post-bottom-bar .bottom-bar-item.bottom-bar-twitter a {
            color: #fff;
            background-color: #1b95e0
        }

        .post-bottom-bar .bottom-bar-item.bottom-bar-weibo a {
            color: #fff;
            background-color: #db4437
        }

        .post-bottom-bar .bottom-bar-item.bottom-bar-qrcode a {
            color: #fff;
            background-color: #4caf50
        }

        .post-bottom-bar.animated {
            -webkit-animation-duration: .5s;
            animation-duration: .5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both
        }

        .post-bottom-bar.animated.pinned {
            -webkit-animation-name: pinned;
            animation-name: pinned
        }

        .post-bottom-bar.headroom--top {
            -webkit-animation-name: pinned;
            animation-name: pinned
        }

        .post-bottom-bar.animated.unpinned {
            -webkit-animation-name: unpinned;
            animation-name: unpinned
        }

        .lists-navigator {
            margin: 30px 0 35px
        }

        .onelist-page .lists-navigator {
            margin: 35px 0 35px
        }

        .lists-navigator ol {
            margin: 0;
            padding: 0 10px;
            list-style: none;
            text-align: center
        }

        .lists-navigator ol li {
            display: inline-block;
            color: #5f5f5f
        }

        .lists-navigator ol li a {
            font-size: 14px;
            padding: 0 20px;
            color: #5f5f5f
        }

        .lists-navigator ol li.current a {
            color: #eb5055
        }

        #comments .lists-navigator {
            margin: 20px 0
        }

        #comments .lists-navigator ol {
            margin: 20px 0;
            padding: 0 10px;
            list-style: none;
            text-align: center
        }

        #comments .lists-navigator ol li.current a {
            color: #eb5055
        }

        .comment-container {
            position: relative;
            z-index: 1;
            color: #5f5f5f;
            background-color: #f7f7f7
        }

        #comments {
            max-width: 700px;
            margin: 0 auto;
            padding: 0 20px
        }

        #comments .page-navigator {
            margin: 0
        }

        #comments a {
            color: #5f5f5f
        }

        #comments .response {
            font-size: 14px;
            font-weight: 400;
            display: block;
            padding: 30px 0 30px 20px;
            color: #5f5f5f
        }

        #comments .response a {
            color: #eb5055
        }

        .comment-list {
            margin: 0;
            padding-left: 0;
            list-style-type: none
        }

        .comment-parent {
            margin: 20px 0;
            border: 1px solid rgba(184, 197, 214, .2);
            border-radius: 3px;
            background: #fff;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
            box-shadow: 0 1px 4px rgba(0, 0, 0, .04)
        }

        .comment-parent:last-child {
            margin: 20px 0 0
        }

        .comment-parent:first-child {
            margin: 0
        }

        .comment-child, .comment-child2 {
            border-top: 1px solid rgba(184, 197, 214, .2)
        }

        .comment-view {
            padding: 20px;
            cursor: pointer
        }

        .comment-header {
            display: inline-block;
            width: 100%
        }

        .comment-header .avatar {
            display: inline-block;
            float: left;
            width: 40px;
            height: 40px;
            border: 1px solid #eaeaea;
            border-radius: 50%
        }

        .comment-header .comment-author {
            font-size: 13px;
            line-height: 45px;
            display: inline-block;
            float: left;
            margin: 0 20px
        }

        .comment-header .comment-by-author a {
            color: #eb5055 !important
        }

        .comment-content {
            margin-bottom: 10px;
            color: #313131
        }

        .comment-meta {
            font-size: 12px
        }

        .comment-meta .comment-reply {
            display: none;
            float: right
        }

        .comment-meta .comment-reply a {
            color: #eb5055 !important
        }

        .comment-view:hover .comment-meta .comment-reply {
            display: block
        }

        .comment-parent > .comment-children .avatar {
            width: 34px;
            height: 34px;
            margin: 3px 0 0 3px
        }

        .comment-parent > .comment-children .comment-author-at {
            float: left;
            margin-right: 5px
        }

        .comment-parent > .comment-children .comment-content {
            margin: -3px 3px 10px
        }

        .comment-parent > .comment-children .comment-meta {
            margin: 0 3px
        }

        .comment-form {
            position: relative;
            margin: 0 0 40px;
            padding: 10px 20px;
            border-radius: 3px;
            background: #fff;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
            box-shadow: 0 1px 4px rgba(0, 0, 0, .04)
        }

        .comment-form .form-control {
            font-size: 13px;
            display: block;
            width: 100%;
            height: 34px;
            color: #313131;
            outline: 0
        }

        .comment-form .form-control:focus {
            border-color: #eb5055;
            outline: 0
        }

        .comment-form textarea.form-control {
            overflow: hidden;
            height: 150px;
            padding: 10px 0;
            resize: none;
            border-radius: 0
        }

        .comment-form .input-control {
            float: left;
            width: 100%;
            max-width: 206px;
            border-bottom: 1px dashed #ddd;
            border-radius: 0
        }

        .comment-form .submit {
            font-size: 13px;
            position: absolute;
            right: 20px;
            bottom: 20px;
            display: block;
            height: 32px;
            margin: 0 auto;
            padding: 0 20px;
            -webkit-transition-duration: .4s;
            transition-duration: .4s;
            text-align: center;
            color: #313131;
            border: 1px solid #f7f7f7;
            border-radius: 30px;
            background-color: #f7f7f7
        }

        .comment-form .submit:hover, .submit:active, .submit:active:focus, .submit:focus {
            color: #eb5055;
            border: 1px solid #eb5055;
            outline-style: none;
            background-color: #fff
        }

        .footer {
            position: relative;
            z-index: 1;
            margin-top: 0;
            padding-bottom: 50px;
            background-color: #fff
        }

        .footer-social {
            border-bottom: 1px solid rgba(184, 197, 214, .2)
        }

        .footer-social .footer-container {
            max-width: 940px;
            margin: 0 auto
        }

        .footer-social .social-list {
            padding: 20px;
            text-align: center
        }

        .footer-social .social-list a {
            font-size: 13px;
            padding: 0 25px;
            text-decoration: none;
            color: #5f5f5f
        }

        .footer-meta {
            padding: 50px 0 0;
            list-style: none
        }

        .footer-meta .footer-container {
            width: 100%;
            max-width: 960px;
            height: 250px;
            margin: 0 auto;
            padding: 0 80px
        }

        .footer-meta .meta-item {
            position: relative;
            float: left;
            width: 33.3333333%;
            min-height: 1px;
            padding: 0 30px
        }

        .footer-meta .meta-copyright .info-logo img {
            height: 32px;
            margin-bottom: 12px
        }

        .footer-meta .meta-copyright .info-text p {
            font-size: 13px;
            line-height: 20px;
            margin: 0;
            color: #767676
        }

        .footer-meta .meta-copyright .info-text a {
            color: #767676
        }

        .footer-meta .meta-title {
            font-size: 14px;
            padding: 0 0 10px 0;
            text-decoration: none;
            color: #5f5f5f
        }

        .footer-meta .meta-posts li {
            font-size: 13px;
            line-height: 25px;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #767676
        }

        .footer-meta .meta-posts li a {
            color: #5f5f5f
        }

        .footer-meta .meta-comments li {
            font-size: 13px;
            line-height: 25px;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #5f5f5f
        }

        .footer-meta .meta-comments li a {
            color: #767676
        }

        @media (max-width: 1000px) {
            .directory-content {
                display: none
            }

            .post-header-thumb {
                height: 280px
            }

            .post-header-thumb-cover {
                height: 280px
            }

            .post-header-thumb-op {
                height: 280px
            }

            .post-header-thumb-container {
                top: 70px
            }
        }

        @media (max-width: 880px) {
            .index-page {
                padding: 80px 0 0
            }

            .archive-page {
                padding: 80px 0 20px
            }

            .common-page {
                padding: 80px 0 0
            }

            .post-onelist-item-container {
                padding: 50px 20px 55px
            }

            .post-list-item {
                width: 50%;
                padding: 10px
            }

            .post-list-item:nth-child(odd) {
                padding-left: 20px
            }

            .post-list-item:nth-child(even) {
                padding-right: 20px
            }

            .lists-navigator {
                margin: 25px 0 30px
            }

            .post-header-thumb {
                height: 250px
            }

            .post-header-thumb-op {
                height: 250px
            }

            .post-header-thumb-cover {
                height: 250px
            }

            .post-header-thumb-container {
                top: 60px
            }

            .footer-meta .footer-container {
                padding: 0
            }

            .main-content {
                margin: 0 auto
            }

            .footer-meta .meta-item {
                padding: 0 20px
            }
        }

        @media (max-width: 700px) {
            .comment-form .input-control {
                max-width: 100%
            }

            .post-header-thumb {
                height: 220px
            }

            .post-header-thumb-op {
                height: 220px
            }

            .post-header-thumb-cover {
                height: 220px
            }

            .post-header-thumb-container {
                top: 40px
            }

            .post-page {
                padding: 20px 25px 0
            }

            .page-page {
                padding: 90px 25px 0
            }

            .search-page .search-tags {
                padding: 0 0 15px
            }

            .search-page .search-tags p {
                margin: 0
            }

            .related-post-lists {
                padding-top: 15px
            }

            .post-onelist-item-container {
                padding: 20px 20px 25px
            }

            .post-onelist-item-container .onelist-item-thumb {
                min-height: 240px
            }
        }

        @media (max-width: 650px) {
            .navbar-menu {
                display: none
            }

            .navbar-search {
                padding: 0 35px 0 0
            }

            .navbar-search form {
                width: 180px;
                margin-right: 55px
            }

            .navbar-mobile-menu {
                display: inline-block
            }

            .red-gradient {
                display: none
            }

            .meta-posts {
                display: none
            }

            .meta-comments {
                display: none
            }

            .post-bottom-bar .social-share {
                display: none
            }

            .post-page {
                padding: 90px 25px 0
            }

            .common-page .post-list-item {
                width: 100%;
                padding: 10px 20px
            }

            .footer-social {
                display: none
            }

            .footer-meta .footer-container {
                height: 70px;
                padding: 0 15px
            }

            .footer-meta .meta-item {
                width: 100%;
                padding: 0 10px
            }

            .footer-meta .meta-copyright .info-text {
                float: right
            }

            .footer-meta .meta-copyright .info-text p {
                text-align: right
            }

            .post-onelist-item-container .onelist-item-thumb {
                min-height: 220px
            }

            .post-header-thumb {
                display: none
            }

            .post-page .post-header {
                display: inherit
            }

            .post-page .post-content .post-tags {
                display: inherit
            }
        }

        @media (max-width: 580px) {
            .navbar-search form {
                width: 150px
            }

            .index-page {
                padding: 70px 0 0
            }

            .archive-page {
                padding: 70px 0 20px
            }

            .common-page {
                padding: 70px 0 0
            }

            .post-list-item {
                width: 100%;
                padding: 10px 20px
            }

            .post-list-item:first-child {
                padding-top: 20px
            }

            .archive-page .post-list-item:first-child {
                padding-top: 0
            }

            .archive-page .post-list-item:last-child {
                padding-bottom: 0
            }

            .common-page .post-list-item:first-child {
                padding-top: 0
            }

            .related-post-lists {
                padding-top: 5px
            }

            .main-content {
                margin: 0 auto
            }

            .post-onelist-item-container {
                padding: 20px 20px 25px
            }

            .post-onelist-item-container .item-content {
                display: none
            }

            .post-onelist-item-container .item-readmore {
                display: none
            }

            .post-onelist-item-container .onelist-item-thumb {
                min-height: 180px
            }
        }

        @media (max-width: 410px) {
            .meta-copyright-info .info-logo {
                display: none
            }
        }

        @-webkit-keyframes unpinned {
            0% {
                -webkit-transform: translateY(0)
            }
            100% {
                -webkit-transform: translateY(50px)
            }
        }

        @keyframes unpinned {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
            100% {
                -webkit-transform: translateY(50px);
                transform: translateY(50px)
            }
        }

        @-webkit-keyframes pinned {
            0% {
                -webkit-transform: translateY(50px)
            }
            100% {
                -webkit-transform: translateY(0)
            }
        }

        @keyframes pinned {
            0% {
                -webkit-transform: translateY(50px);
                transform: translateY(50px)
            }
            100% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
        }

        @-webkit-keyframes slideDown {
            0% {
                -webkit-transform: translateY(-70px)
            }
            100% {
                -webkit-transform: translateY(0)
            }
        }

        @keyframes slideDown {
            0% {
                -webkit-transform: translateY(-70px);
                transform: translateY(-70px)
            }
            100% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
        }

        @-webkit-keyframes slideUp {
            0% {
                -webkit-transform: translateY(0)
            }
            100% {
                -webkit-transform: translateY(-70px)
            }
        }

        @keyframes slideUp {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
            100% {
                -webkit-transform: translateY(-70px);
                transform: translateY(-70px)
            }
        }

        @keyframes fade-in {
            0% {
                transform: translateY(20px);
                opacity: 0
            }
            100% {
                transform: translateY(0);
                opacity: 1
            }
        }

        @-webkit-keyframes fade-in {
            0% {
                -webkit-transform: translateY(20px);
                opacity: 0
            }
            100% {
                -webkit-transform: translateY(0);
                opacity: 1
            }
        }

    }
</style>
